<template>
  <div class="dm">
    <div class="dm-full" :style="{width: pageWidth+'px'}">
      <div class="dm-query">
        <QueryBar @onChange="doQueryChange" />
      </div>
      <div class="dm-data" v-loading="dataRowsLoading">
          <div class="dm-data-top">
            <a-pagination v-model="pagination.current"
                          class="dm-data-page"
                          :total="pagination.total"
                          :default-page-size="pagination.defaultPageSize"
                          :show-total="pagination.showTotal"
                          size="small"
                          @change="doPageChange" />
            <div class="dm-data-actions">
              <a-popconfirm :disabled="dataRowsSelected.length==0" title="您确定要删除选中的数据吗？" placement="left" @confirm="doDelete()">
                <a-button :disabled="dataRowsSelected.length==0">删除</a-button>
              </a-popconfirm>
              <a-button @click="doAdd">新增</a-button>
            </div>
          </div>
          <Table :data="dataRows" size="small" stripe highlight-current-row
                 :height="pageHeight-107"
                 @select="doTableSelect"
                 @select-all="doTableSelect"
                 @row-click="doTableRowClick"
                 @row-dblclick="doTableRowDblclick"
                 @sort-change="doTableSortChange"
          >
            <TableColumn type="selection" width="35" />
            <TableColumn prop="name" label="公司名称" width="220" sortable="custom" fixed />
            <TableColumn prop="contactUser" label="联系人" width="100" sortable="custom" />
            <TableColumn prop="contactTel" label="联系电话" width="120" sortable="custom" />
            <TableColumn label="访问地址" width="100">
              <a-tooltip slot-scope="{row}" destroyTooltipOnHide>
                <a target="_blank" :href="getVisitUrl(row)">登录</a>
                <div slot="title">点击【登录】打开登录页面： {{getVisitUrl(row)}}</div>
              </a-tooltip>
            </TableColumn>
            <TableColumn prop="address" label="公司地址" min-width="250" sortable="custom" />
            <TableColumn prop="statusText" label="状态" width="80" sortable="custom" column-key="statusCode">
              <template slot-scope="{row}">
                <a-tag v-if="row.statusCode=='1'" color="#2db7f5" title="点击【停用】" @click.stop="doEditStatus(row, '0')">{{row.statusText}}</a-tag>
                <a-tag v-else color="#999999" title="点击【启用】" @click.stop="doEditStatus(row, '1')" type="primary">{{row.statusText}}</a-tag>
              </template>
            </TableColumn>
            <TableColumn prop="createTime" label="创建时间" width="160" sortable="custom" />
            <TableColumn prop="updateTime" label="修改时间" width="160" sortable="custom" />
            <TableColumn label="操作" width="120" fixed="right">
              <a-button-group slot-scope="{row}">
                <a-button size="small" @click="doEdit(row)">修改</a-button>
                <a-button size="small" @click="doEditAuth(row)">授权</a-button>
              </a-button-group>
            </TableColumn>
          </Table>
      </div>
    </div>
  </div>
</template>
<script>
import DataTableUtils from '@/utils/DataTableUtils.js'

import QueryBar from './QueryBar.vue'

const EditFile = '/platform/tenant/edit.vue'
const EditRolesFile = '/platform/tenant/editRoles.vue'

export default {
  mixins: [DataTableUtils],
  components: {QueryBar},
  data() {
    return {
      dataRowsQueryUrl: '/jsofted/tenant/query',
      dataRowsDeleteUrl: '/jsofted/tenant/delete/',
      updateUrl: '/jsofted/tenant/update/',
    }
  },
  methods: {
    getVisitUrl(record) {
      return window.location.host + '/' + record.id
    },
    doAdd() {
      this.$store.dispatch('ctx/openPage', {
        path: EditFile,
        title: '新增租户信息',
        params: {}
      })
    },
    doEdit(record) {
      this.$store.dispatch('ctx/openPage', {
        path: EditFile,
        title: '【' + record.name + '】租户信息',
        params: {
          id: record.id
        }
      })
    },
    doEditStatus(record, statusCode) {
      const formData = {
        statusCode: statusCode
      }
      this.$http.post(this.updateUrl + record.id, formData).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message)
          this.queryDataRows()
        } else {
          this.$alert.error({
            title: result.message,
          })
        }
      })
    },
    doEditAuth(record) {
      this.$store.dispatch('ctx/openPage', {
        path: EditRolesFile,
        title: '【' + record.name + '】权限设置',
        params: {
          id: record.id
        }
      })
    },
  }
}
</script>
